<template>
  <div id="index">
    <div class="app-container"
      id="container">
      <el-container style="height: 700px;">
        <el-aside width="400px"
          style="background-color: #fff;border: 1px solid #ebebeb;-moz-border-radius: 10px;margin:10px">
          <el-form ref="form"
            :model="form"
            label-width="140px"
            label-position="center">
            <div>
              <el-image style="border-radius:50px;    width: 64px;
    margin-left: 140px;"
                slot="reference"
                :src="form.headImage"
                :preview-src-list="[form.headImage]">
              </el-image>
            </div>
            <el-form-item label="会员等级">
              {{form.levelName}}
            </el-form-item>
            <el-form-item label="用户ID">
              {{form.customerNo}}
            </el-form-item>
            <!-- <el-form-item label="用户昵称" >
                            {{form.customerName}}
                        </el-form-item> -->
            <el-form-item label="用户姓名">
              {{form.customerName}}
            </el-form-item>

            <el-form-item label="性别">
              {{sexFormat(form.sex)}}
            </el-form-item>
            <el-form-item label="联系人">
              {{form.contactMan}}
            </el-form-item>
            <el-form-item label="联系电话">
              {{form.phone}}
            </el-form-item>

            <el-form-item label="地区">
              {{form.province}}{{form.city}}{{form.area}}
            </el-form-item>
          </el-form>
        </el-aside>
        <el-main style="background-color: #fff;border: 1px solid #ebebeb;-moz-border-radius: 10px;margin:10px">
          <el-tabs v-model="activeName"
            @tab-click="handleClick">
            <el-tab-pane label="卡包"
              name="first">
              <div>
                <div class="product-header">
                  <em style="font-style: normal;"
                    class="big_title_style">卡包统计</em>
                </div>
                <div style="margin-left: 146px;margin-top: 40px;">
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <div class="div-label"
                        style="margin-left: 20px;">
                        {{this.data.count}}
                      </div>
                      <div class="div-label">
                        卡包总数
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="div-label"
                        style="margin-left: 20px;">
                        {{data.wsyCount}}
                      </div>
                      <div class="div-label">
                        未使用数量
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="div-label"
                        style="margin-left: 20px;">
                        {{data.syCount}}
                      </div>
                      <div class="div-label">
                        已使用数量
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="div-label"
                        style="margin-left: 20px;">
                        {{data.gqCount}}
                      </div>
                      <div class="div-label">
                        过期数量
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div class="div-label"
                        style="margin-left: 20px;">
                        {{data.zsCount}}
                      </div>
                      <div class="div-label">
                        赠送数量
                      </div>
                    </el-col>
                  </el-row>
                </div>

                <div class="product-header"
                  style="margin-top:40px">
                  <em style="font-style: normal;"
                    class="big_title_style">卡包明细</em>
                </div>
                <div>

                  <el-tabs style="margin-left:20px"
                    v-model="cardAcvitiyName"
                    type="card"
                    @tab-click="handleCardClick">
                    <el-tab-pane label="全部"
                      name="cardFirst">
                      <el-row :gutter="10">
                        <el-col :span="8"
                          :key="ind"
                          v-for="(item,ind) in list">
                          <div class="div-card">
                            <div class="div-card-div">
                              <p class="div-card-first">{{item.serviceType == 'service' ?
                                                            item.serviceItemName : item.cardName}}</p>
                              <p class="div-card-second">{{item.endDate}}到期</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 0">
                                该卡券总共可以使用{{item.times}}次</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 1">
                                该卡券不限制次数使用</p>
                            </div>
                            <div class="div-card-fourth">
                              已使用{{item.usesTimes}}次
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <pagination v-show="total>0"
                        :total="total"
                        :page.sync="query.pageNum"
                        :limit.sync="query.pageSize"
                        @pagination="getCardList('1')" />
                    </el-tab-pane>
                    <el-tab-pane label="待使用"
                      name="cardSecond">
                      <el-row :gutter="10">
                        <el-col :span="8"
                          :key="ind"
                          v-for="(item,ind) in list">
                          <div class="div-card">
                            <div class="div-card-div">
                              <p class="div-card-first">{{item.serviceType == 'service' ?
                                                            item.serviceItemName : item.cardName}}</p>
                              <p class="div-card-second">{{item.endDate}}到期</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 0">
                                该卡券总共可以使用{{item.times}}次</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 1">
                                该卡券不限制次数使用</p>
                            </div>
                            <div class="div-card-fourth">
                              已使用{{item.usesTimes}}次
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <pagination v-show="total>0"
                        :total="total"
                        :page.sync="query.pageNum"
                        :limit.sync="query.pageSize"
                        @pagination="getCardList('2')" />
                    </el-tab-pane>
                    <el-tab-pane label="已使用"
                      name="cardThird">
                      <el-row :gutter="10">
                        <el-col :span="8"
                          :key="ind"
                          v-for="(item,ind) in list">
                          <div class="div-card">
                            <div class="div-card-div">
                              <p class="div-card-first">{{item.serviceType == 'service' ?
                                                            item.serviceItemName : item.cardName}} </p>
                              <p class="div-card-second">{{item.endDate}}到期</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 0">
                                该卡券总共可以使用{{item.times}}次</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 1">
                                该卡券不限制次数使用</p>
                            </div>
                            <div class="div-card-fourth">
                              已使用{{item.usesTimes}}次
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <pagination v-show="total>0"
                        :total="total"
                        :page.sync="query.pageNum"
                        :limit.sync="query.pageSize"
                        @pagination="getCardList('3')" />
                    </el-tab-pane>
                    <el-tab-pane label="已失效"
                      name="cardFourth">
                      <el-row :gutter="10">
                        <el-col :span="8"
                          :key="ind"
                          v-for="(item,ind) in list">
                          <div class="div-card">
                            <div class="div-card-div">
                              <p class="div-card-first">{{item.serviceType == 'service' ?
                                                            item.serviceItemName : item.cardName}}</p>
                              <p class="div-card-second">{{item.endDate}}到期</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 0">
                                该卡券总共可以使用{{item.times}}次</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 1">
                                该卡券不限制次数使用</p>
                            </div>
                            <div class="div-card-fourth">
                              已使用{{item.usesTimes}}次
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <pagination v-show="total>0"
                        :total="total"
                        :page.sync="query.pageNum"
                        :limit.sync="query.pageSize"
                        @pagination="getCardList('4')" />
                    </el-tab-pane>

                    <el-tab-pane label="赠送"
                      name="cardFive">
                      <el-row :gutter="10">
                        <el-col :span="8"
                          :key="ind"
                          v-for="(item,ind) in list">
                          <div class="div-card">
                            <div class="div-card-div">
                              <p class="div-card-first">{{item.serviceType == 'service' ?
                                                            item.serviceItemName : item.cardName}}</p>
                              <p class="div-card-second">{{item.endDate}}到期</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 0">
                                该卡券总共可以使用{{item.times}}次</p>
                              <p class="div-card-third"
                                v-if="item.isUnLimit == 1">
                                该卡券不限制次数使用</p>
                            </div>
                            <div class="div-card-fourth">
                              已使用{{item.usesTimes}}次
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <pagination v-show="total>0"
                        :total="total"
                        :page.sync="query.pageNum"
                        :limit.sync="query.pageSize"
                        @pagination="getCardList('5')" />
                    </el-tab-pane>
                  </el-tabs>

                </div>
              </div>

            </el-tab-pane>

            <el-tab-pane label="消费"
              name="second">
              <div>
                <div class="product-header">
                  <em style="font-style: normal;"
                    class="big_title_style">账号余额</em>
                </div>
                <div style="margin-left: 146px;margin-top: 40px;">
                  <el-row :gutter="20">

                    <el-col :span="8">
                      <div class="div-label-big"
                        style="margin-left: 20px;">
                        {{data.cc || 0}}
                      </div>
                      <div class="div-label-big">
                        累计充值
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="div-label-big"
                        style="margin-left: 20px;">
                        {{data.xf/100 || 0}}
                      </div>
                      <div class="div-label-big">
                        累计消费
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="div-label-big"
                        style="margin-left: 20px;">
                        {{data.cs || 0}}
                      </div>
                      <div class="div-label-big">
                        充值次数
                      </div>
                    </el-col>
                  </el-row>
                </div>

                <div class="product-header"
                  style="margin-top:40px">
                  <em style="font-style: normal;"
                    class="big_title_style">卡包明细</em>
                </div>
                <div>

                  <el-table style="width: 1000px;margin-left: 20px;"
                    :data="list"
                    border>
                    <el-table-column width="200px"
                      prop="orderNo"
                      label="订单号">
                    </el-table-column>
                    <el-table-column width="200px"
                      prop="proName"
                      label="消费信息">
                    </el-table-column>
                    <el-table-column width="200px"
                      prop="storeName"
                      label="消费门店">
                    </el-table-column>
                    <el-table-column width="200px"
                      prop="payAmountStr"
                      label="消费金额">
                    </el-table-column>
                    <el-table-column width="200px"
                      prop="payTime"
                      label="创建时间">
                    </el-table-column>
                  </el-table>
                  <pagination v-show="total>0"
                    :total="total"
                    :page.sync="query.pageNum"
                    :limit.sync="query.pageSize"
                    @pagination="getSecondList" />

                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="余额"
              name="third">
              <div>
                <div class="product-header">
                  <em style="font-style: normal;"
                    class="big_title_style">账号余额</em>
                </div>
                <div style="margin-left: 146px;margin-top: 40px;">
                  <el-row :gutter="20">

                    <el-col :span="8">
                      <div class="div-label-big"
                        style="margin-left: 20px;">
                        {{data.balance || 0}}
                      </div>
                      <div class="div-label-big">
                        菠萝金币
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="div-label-big"
                        style="margin-left: 20px;">
                        {{data.redBag || 0}}
                      </div>
                      <div class="div-label-big">
                        菠萝银币
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="div-label-big"
                        style="margin-left: 20px;">
                        {{data.score || 0}}
                      </div>
                      <div class="div-label-big">
                        菠萝派
                      </div>
                    </el-col>
                  </el-row>
                </div>

                <div class="product-header"
                  style="margin-top:40px">
                  <em style="font-style: normal;"
                    class="big_title_style">卡包明细</em>
                </div>
                <div>

                  <el-table style="width: 1000px;margin-left: 20px;"
                    :data="list"
                    border>
                    <el-table-column prop="storeName"
                      label="门店名称"
                      width="400px">
                    </el-table-column>
                    <el-table-column prop="balance"
                      label="菠萝金币余额"
                      width="300px">
                    </el-table-column>
                    <el-table-column prop="redBag"
                      label="菠萝银币余额"
                      width="300px">
                    </el-table-column>
                  </el-table>
                  <pagination v-show="total>0"
                    :total="total"
                    :page.sync="query.pageNum"
                    :limit.sync="query.pageSize"
                    @pagination="getThirdList" />

                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="客户档案"
              name="fourth">
              <div>
                <table :key="ind"
                  width="900"
                  cellspacing="0"
                  align="left"
                  v-for="(item,ind) in list ">
                  <thead>
                    <tr style="background-color: rgb(232 232 232);    text-align: left;">
                      <td colspan="3">
                        <span>服务日期：{{item.subscribeDate}}</span>
                        <span style="margin-left:70px">治疗师：{{item.technicianName}}</span>
                        <span style="margin-left:70px">服务时长：约{{item.durationTime}}分钟</span>
                        <span style="margin-left:70px">持卡金额：{{item.price}}元</span>

                      </td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th td
                        style="width:300px">项目名称</th>
                      <th td
                        style="width:300px">服务时长</th>
                      <th td
                        style="width:300px">治疗师</th>
                    </tr>
                    <tr :key="index"
                      v-for="(vo,index) in item.customerSubscribeDetailVos">
                      <td td
                        style="width:300px">{{vo.serviceName}}</td>
                      <td td
                        style="width:300px">约{{vo.time}}分钟</td>
                      <td td
                        style="width:300px">{{vo.technicianName}}</td>
                    </tr>
                  </tbody>

                  <tfoot>
                    <tr style="background-color: rgb(232 232 232);">
                      <td>客户诉求</td>
                      <td colspan="2">{{item.customerRequirement}}</td>
                    </tr>
                    <tr style="background-color: rgb(232 232 232);">
                      <td>项目铺垫</td>
                      <td colspan="2">{{item.projectBedding}}</td>
                    </tr>
                    <!-- <tr style="background-color: rgb(232 232 232);">
                      <td>皮肤问题</td>
                      <td colspan="2">{{item.skinProblems}}</td>
                    </tr> -->
					<!--
                    <tr style="background-color: rgb(232 232 232);">
                      <td>渠道来源</td>
                      <td colspan="2">{{item.sourcePlatform}}</td>
                    </tr>
                    <tr style="background-color: rgb(232 232 232);">
                      <td>设备能量</td>
                      <td colspan="2">{{item.energy}}</td>
                    </tr>
					-->
                    <tr style="background-color: rgb(232 232 232);">
                      <td style="width:30px">客户照片</td>
                      <td colspan="2">
                        <el-image :z-index="zIndex"
                          :preview-src-list="item.customerImagesStr"
                          v-for="(imgm, indexs) in item.customerImagesStr"
                          :src="imgm"
                          :key="indexs"
                          style="
                      width: 50px;
                      height: 50px;
                      margin-left: 10px;
                      margin-top: 10px;
                      border: 1px solid #ebebeb;
                      border-radius: 6px;
                    ">
                        </el-image>

                      </td>
                    </tr>
                  </tfoot>
                </table>

              </div>

            </el-tab-pane>
          </el-tabs>

        </el-main>
        <div class="dw">
          <el-button @click="colsePro"
            style="margin-top: 10px;margin-left: 40%;">返回</el-button>
        </div>
      </el-container>

    </div>
  </div>
</template>

<script>


import {
  getInfo, listBuyRecord, getStatisticsByUid, listFundStore, getFundByUid,
  listConsumptionByUid, getConsumptionStatics, recirdListByUid
} from "@/api/customer/Info"


export default {
  components: {

  },
  data () {
    return {
      customerUid: this.$route.params && this.$route.params.customerUid,
      form: {},
      sexOptions: [],
      activeName: 'first',
      cardAcvitiyName: 'first',
      query: {
        pageSize: 9,
        pageNum: 1,
        type: null,
      },
      total: 0,
      loading: false,
      data: {},
      list: [],
    };
  },
  created () {
    this.getDicts("customer_sex").then(response => {
      this.sexOptions = response.data;
    });
    getInfo(this.customerUid).then(response => {
      this.form = response.data.customer;
    });
    this.getFirstList();
    this.cardAcvitiyName = 'cardFirst'
    this.getCardList('1');
  },
  methods: {
    handleCardClick (tab, event) {
      this.query.pageSize = 9;
      this.query.pageNum = 1;
      if (tab.name == "cardFirst") {
        this.query.type = 1;
      } else if (tab.name == "cardSecond") {
        this.query.type = 2;
      } else if (tab.name == "cardThird") {
        this.query.type = 3;
      } else if (tab.name == "cardFourth") {
        this.query.type = 4;
      } else if (tab.name == "cardFive") {
        this.query.type = 5;
      }
      this.getCardList();
    },
    handleClick (tab, event) {
      console.log(tab, event);
      if (tab.name == "first") {
        this.query.pageSize = 9;
        this.query.pageNum = 1;
        this.getFirstList();
        this.getCardList('1');
        this.cardAcvitiyName = 'cardFirst'
      } else if (tab.name == "second") {
        this.query.pageSize = 10;
        this.query.pageNum = 1;
        this.getSecondList();
      } else if (tab.name == "third") {
        this.query.pageSize = 10;
        this.query.pageNum = 1;
        this.getThirdList();
      } else if (tab.name == "fourth") {
        this.getFourList();
      }
    },
    getFirstList () {
      getStatisticsByUid(this.customerUid).then(response => {
        this.data = response.data;
      })
    },
    getCardList (type) {
      if (type) {
        this.query.type = type;
      }
      this.loading = true;
      listBuyRecord(this.customerUid, this.query).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    getSecondList () {
      this.loading = true;
      listConsumptionByUid(this.customerUid, this.query).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      })
      getConsumptionStatics(this.customerUid).then(response => {
        this.data = response.data;
      })
    },
    getThirdList () {
      this.loading = true;
      listFundStore(this.customerUid, this.query).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      })
      getFundByUid(this.customerUid).then(response => {
        this.data = response.data;
      })
    },
    getFourList () {

      recirdListByUid(this.customerUid).then(response => {
        this.list = response.data;
        console.log(this.data)
      })
    },
    sexFormat (value) {
      return this.selectDictLabel(this.sexOptions, value);
    },
    colsePro () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/customer/info",
        query: {
          t: Date.now()
        }
      });
    },
  }
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.product-header {
  top: 0;
  width: 600px;
  padding: 15px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.div-label {
  font-size: 16px;
  color: #101010;
}

.div-label-big {
  font-size: 18px;
  color: #101010;
}

.div-card {
  height: 120px;
  width: 350px;
  margin: 10px;
  background-color: #f2f2f2;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.div-card-div {
  width: 230px;
  float: left;
}

.div-card-first {
  margin: 10px 10px 10px 15px;
  font-size: 16px;
}

.div-card-second {
  margin: 5px 5px 5px 15px;
  font-size: 12px;
}

.div-card-third {
  margin: 20px 20px 20px 15px;
  font-size: 14px;
}

.div-card-fourth {
  width: 120px;
  float: left;
  margin: 20px 0px 0px -25px;
  font-size: 16px;
}

table {
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  text-align: left;
}

table th {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}

table td {
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}

table tr {
  height: 48px;
}
</style >
